﻿@{
    Layout = null;
}
<link href="../../Content/jquery-easyui-1.3.1/themes/icon.css" rel="stylesheet" />
<link href="../../Content/jquery-easyui-1.3.1/themes/default/easyui.css" rel="stylesheet" />
<link href="../../Content/Site.css" rel="stylesheet" />
<script src="../../Content/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script>
<script src="../../Content/jquery-easyui-1.3.1/jquery.easyui.min.js"></script>
<script src="../../Content/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script>
@*修改时间格式的Js文件*@
<script src="../../Content/jquery-easyui-1.3.1/datapattern2.js"></script>

<script type="text/javascript">
    var url;
    function add() {
        $('#dlg').dialog('open').dialog('setTitle', '新建');
        $('#fm').form('clear');
        url = 'Regist';
    }
    function edit() {
        var rows = $('#dg').datagrid('getSelections');
        if (rows.length == 1) {
            $('#dlg').dialog('open').dialog('setTitle', '编辑');
            $('#fm').form('load', rows[0]);
            url = 'UpdateInfo';
        }
        else if (rows.length > 1) {
            $.messager.alert("提示", "每次只能修改一行数据，你已经选择了<font color='red' size='6'>" + rows.length + "</font>行");
        }
        else {
            $.messager.alert("提示", "请先选择记录.");
        }
    }
    function save() {
        $('#fm').form('submit', {
            url: url,
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result == "OK") {
                    $('#dlg').dialog('close');
                    $("#dg").datagrid("reload");
                    $.messager.alert("提示", "操作成功!");
                }
                else {
                    $.messager.alert("提示", result);
                }
            }
        });
    }
    function destroy() {
        //获取到用户选定的某一列的ID号
        var deleteinfo = $("#dg").datagrid("getSelections");
        //判断用户选择了多少条数据
        // //异步将删除的ID发送到后台，后台删除之后，返回前台OK，前台刷新表格
        if (deleteinfo.length >= 1) {
            var ids = "";   //1,2,3,4
            for (var i = 0; i < deleteinfo.length; i++) {
                ids += deleteinfo[i].ID + ",";
            }
            //去掉最后的一个,
            ids = ids.substring(0, ids.length - 1);

            //遍历出删除用户的信息
            var NameList = "";
            for (var i = 0; i < deleteinfo.length; i++) {
                NameList += deleteinfo[i].LightName + ",";
            }
            NameList = NameList.substring(0, NameList.length - 1);

            //发送异步请求删除数据
            $.messager.confirm("删除信息", "您确认删除<font color='Red' size='3'>" + NameList + "</font>信息吗？", function (DeleteInfo) {
                if (DeleteInfo) {
                    $.post("/Light/DeleteInfo", { deleteInfoID: ids }, function (data) {
                        if (data == "OK") {
                            $.messager.alert("友情提示", "删除成功");
                            $("#dg").datagrid("reload");

                            //当删除完成的时候清除掉所选择的长度，防止下次选择的时候还记录了上次的内容
                            $("#dg").datagrid("clearSelections");
                        }
                        else {
                            $.messager.alert("友情提示", data);
                        }
                    });
                }
            });
        }
        else {
            $.messager.alert("友情提示", "请您选择要删除的数据");
        }
    }
    function editLightState() {

        //获取到用户选定的某一列的ID号
        var deleteinfo = $("#dg").datagrid("getSelections");
        //判断用户选择了多少条数据
        // //异步将删除的ID发送到后台，后台删除之后，返回前台OK，前台刷新表格
        if (deleteinfo.length >= 1) {
            var ids = "";   //1,2,3,4
            for (var i = 0; i < deleteinfo.length; i++) {
                ids += deleteinfo[i].ID + ",";
            }
            //去掉最后的一个,
            ids = ids.substring(0, ids.length - 1);

            //遍历出删除用户的信息
            var NameList = "";
            for (var i = 0; i < deleteinfo.length; i++) {
                NameList += deleteinfo[i].LightName + ",";
            }
            NameList = NameList.substring(0, NameList.length - 1);

            //发送异步请求删除数据
            $.messager.confirm("修改路灯状态", "您确认修改<font color='Red' size='3'>" + NameList + "</font>状态信息吗？", function (DeleteInfo) {
                if (DeleteInfo) {
                    $('#dlgEditLightState').dialog('open').dialog('setTitle', '修改路灯状态');
                    $('#EditStateIDs').val(ids);
                }
            });
        }
        else {
            $.messager.alert("友情提示", "请您选择要删除的数据");
        }
    }
    function saveState() {
        $('#fmEditStatus').form('submit', {
            url: "EditLightState",
            onSubmit: function () {
                return $(this).form('validate');
            },
            success: function (result) {
                if (result == "OK") {
                    $('#dlgEditLightState').dialog('close');
                    $("#dg").datagrid("reload");
                    $.messager.alert("提示", "操作成功!");
                }
                else {
                    $.messager.alert("提示", result);
                }
            }
        });
    }

</script>
@*-----------------------------------------------根据路灯状态进行搜索--------------------------------------------------*@
<fieldset>
    <legend>筛选</legend>
    <div>

        根据路灯状态进行筛选<select id="cc" style="width:150px"></select>

        <div id="sp">
            <div style="color:#99BBE8;background:#fafafa;padding:5px;">筛选路灯</div>
            <input type="radio" name="state" value=1><span>正常</span><br />
            <input type="radio" name="state" value=2><span>损坏</span><br />
            <input type="radio" name="state" value=3><span>维修</span><br />
        </div>

        <script type="text/javascript">
            $(function () {
                $('#cc').combo({
                    required: true,
                    editable: false
                });

                $('#sp').appendTo($('#cc').combo('panel'));

                $('#sp input').click(function () {
                    var v = $(this).val();
                    var s = $(this).next('span').text();

                    $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');

                    var url = "/Light/LightStateSearch?StateID=" + v;
                    window.location.href = url;

                });
            });
        </script>

    </div>
</fieldset>
@*------------------------------------------------------------------------------------------------------------------------------*@

<div id="jnContext">
    <table id="dg" title="路灯管理" class="easyui-datagrid"
           url="GetAll?StateID=@ViewBag.StateID"
           toolbar="#toolbar" pagination="true" sortname="ID"
           rownumbers="true" fitcolumns="true" singleselect="false">
        <thead>
            <tr>
                <th field="ID">路灯编号</th>
                <th field="LightName">路灯名</th>
                <th field="CenterLng">经度</th>
                <th field="CenterLat">纬度</th>
                <th field="Zoom">比列尺</th>
                <th field="Address">路灯所在地址</th>
                <th field="CreateTime"
                    data-options="formatter:function (value, row, index) {  return (eval(value.replace(/\/Date\((\d+)\)\//gi, 'new Date($1)'))).pattern('yyyy-MM-dd hh:mm:ss');}">
                    路灯标注时间
                </th>
                <th field="Status"
                    data-options="formatter:function (value, row, index){if(value==1)return '正常';else if(value==2)return '损坏';else if(value==3)return '维修'; else return '未知';}">
                    路灯状态
                </th>
                <th field="Brand">路灯品牌</th>
                <th field="Company">路灯维护厂家</th>
                <th field="Information">路灯相关信息</th>
                <th field="Province">路灯所在省</th>
                <th field="City">路灯所在城市</th>
                <th field="District">路灯所在区</th>
                <th field="Street">路灯所在街道</th>
                <th field="StreetNumber">路灯所在街道号</th>
                <th field="Logo">路灯使用图标</th>
            </tr>
        </thead>
    </table>
    <div id="toolbar">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" plain="true" onclick="add()">新建</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" onclick="edit()">编辑</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="destroy()">删除</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" onclick="editLightState()">修改路灯状态</a>

    </div>
</div>


<div id="dlg" class="easyui-dialog" style="width: 400px; height: 600px; padding: 10px 20px"
     closed="true" resizable="true" modal="true" align="center">

    <form id="fm" method="post" novalidate="novalidate">
        <table>
            <tr>
                <th colspan="2">路灯信息</th>
            </tr>

            <tr style="display:none">
                <td><label for="ID">编号：</label></td>
                <td><input class="easyui-numberbox" id="ID" name="ID" /></td>
            </tr>

            <tr>
                <td><label for="LightName">路灯名：</label></td>
                <td><input class="easyui-validatebox" id="LightName" name="LightName" required="true" /></td>
            </tr>

            <tr>
                <td><label for="CenterLng">经度：</label></td>
                <td><input class="easyui-numberbox" id="CenterLng" name="CenterLng" required="true" /></td>
            </tr>
            <tr>
                <td><label for="CenterLat">纬度：</label></td>
                <td><input class="easyui-numberbox" id="CenterLat" name="CenterLat" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Zoom">比列尺：</label></td>
                <td><input class="easyui-numberbox" id="Zoom" name="Zoom" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Address">路灯所在地址：</label></td>
                <td><input class="easyui-validatebox" id="Address" name="Address" required="true" /></td>
            </tr>


            <tr>
                <td><label for="CreateTime">路灯标注时间：</label></td>
                <td><input class="easyui-datetimebox" id="CreateTime" name="CreateTime" required="true" /></td>
            </tr>



            <tr>
                <td><label for="Status">路灯状态：</label></td>
                <td>
                    <select id="Status" class="easyui-combobox" name="Status">
                        <option value=1>正常</option>
                        <option value=2>损坏</option>
                        <option value=3>维修</option>
                    </select>
                </td>

            </tr>

            <tr>
                <td><label for="Brand">路灯品牌：</label></td>
                <td><input class="easyui-validatebox" id="Brand" name="Brand" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Company">路灯维护厂家：</label></td>
                <td><input class="easyui-validatebox" id="Company" name="Company" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Information">路灯相关信息：</label></td>
                <td><input class="easyui-validatebox" id="Information" name="Information" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Province">路灯所在省：</label></td>
                <td><input class="easyui-validatebox" id="Province" name="Province" required="true" /></td>
            </tr>

            <tr>
                <td><label for="City">路灯所在城市：</label></td>
                <td><input class="easyui-validatebox" id="City" name="City" required="true" /></td>
            </tr>

            <tr>
                <td><label for="District">路灯所在区：</label></td>
                <td><input class="easyui-validatebox" id="District" name="District" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Street">路灯所在街道：</label></td>
                <td><input class="easyui-validatebox" id="Street" name="Street" required="true" /></td>
            </tr>

            <tr>
                <td><label for="StreetNumber">路灯所在街道号：</label></td>
                <td><input class="easyui-validatebox" id="StreetNumber" name="StreetNumber" required="true" /></td>
            </tr>

            <tr>
                <td><label for="Logo">路灯使用图标：</label></td>
                <td><input class="easyui-validatebox" id="Logo" name="Logo" required="true" /></td>
            </tr>


            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="save()">确定</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                       onclick="javascript:$('#dlg').dialog('close'); ">关闭</a>
                </td>
            </tr>

        </table>
    </form>

</div>


<div id="dlgEditLightState" class="easyui-dialog" style="width: 300px; height: 200px; padding: 10px 20px"
     closed="true" resizable="true" modal="true" align="center">

    <form id="fmEditStatus" method="post" novalidate="novalidate">

        <input class="easyui-validatebox" id="EditStateIDs" name="EditStateIDs" style="display: none;" />

        <table>

            <tr>
                <td><label for="EditStatus">选择路灯状态：</label></td>
                <td>
                    <select id="EditStatus" class="easyui-combobox" name="EditStatus">
                        <option value=1 selected="selected">正常</option>
                        <option value=2>损坏</option>
                        <option value=3>维修</option>
                    </select>
                </td>
            <tr>

            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveState()">确定</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-cancel"
                       onclick="javascript: $('#dlgEditLightState').dialog('close'); ">关闭</a>
                </td>
            </tr>

        </table>
    </form>

</div>
